<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<#macro script_import>
</#macro>
<#macro script>
</#macro>
<#macro css_import>
</#macro>
<#macro css>
</#macro>
<#macro layout>

    <!DOCTYPE HTML>
    <html>
    <head>
        <title>${WEB_TITLE}</title>
        <link href="${CTPATH}/css/bootstrap.css" rel='stylesheet' type='text/css'/>
        <!-- jQuery (necessary JavaScript plugins) -->
        <script src="${CTPATH}/js/jquery.min.js"></script>
        <!-- Custom Theme files -->
        <link href="${CTPATH}/css/style.css" rel='stylesheet' type='text/css'/>
        <link href="${CTPATH}/css/custom.css" rel='stylesheet' type='text/css'/>
        <!-- Custom Theme files -->
        <!--//theme-style-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="keywords" content="Energy Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
        <script type="application/x-javascript"> addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        } </script>
        <link href='http://fonts.googleapis.com/css?family=Montserrat|Raleway:400,200,300,500,600,700,800,900,100'
              rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>
        <!--/animated-css-->
        <script type="text/javascript" src="${CTPATH}/js/move-top.js"></script>
        <script type="text/javascript" src="${CTPATH}/js/easing.js"></script>
        <!--/script-->
        <script type="text/javascript">
            jQuery(document).ready(function ($) {
                $(".scroll").click(function (event) {
                    event.preventDefault();
                    $('html,body').animate({scrollTop: $(this.hash).offset().top}, 900);
                });
            });
        </script>
        <!--script-->
        <@css_import />
        <#if css ??>
            <style type="text/css">
                <@css />
            </style>
        </#if>
    </head>
    <body>
    <script type="text/javascript">
        $(document).ready(function () {
            $().UItoTop({easingType: 'easeOutQuart'});
            //        $('#menu').children('li.2').addClass('active');
//                alert('${REQUEST.getRequestURL()}');
        });
    </script>
    <!-- banner -->
    <div class="banner" style="min-height: 220px">
        <div class="container">
            <div class="header">
                <div class="col-md-4 head-logo">
                    <h1><a href="index.html"><img src="${CTPATH}/images/engry.png" alt=""/>JUNNAITE</a></h1>
                </div>
                <div class="col-md-4 search">
                    <form>
                        <input type="text" value="" placeholder="Search...">
                        <input type="submit" value="">
                    </form>
                </div>
                <div class="col-md-4 social">
                    <ul>
                        <li><a href="#"><i class="english"></i>
                            <div style="color: #FFFFFF;float: right;line-height: 31px">English</div>
                        </a></li>
                        <!--<li><a href="#"><i class="english"></i></a></li>-->
                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="top-menu">
                <span class="menu"><img src="${CTPATH}/images/nav-icon.png"></span>
                <ul id="menu">
                    <@jp.menus>
                    <#list menus as menu>
                        <li href="${menu.url!}">
                            <a href="${menu.url!}">
                                ${menu.title!}
                                <#if menu.isActive() >
                                    <span class="x-a-border"></span>
                                </#if>
                            </a>
                        </li>
                    </#list>
                </@jp.menus>
                <div class="clearfix"></div>
                </ul>
                <!-- script-for-menu -->
                <script>
                    $("span.menu").click(function () {
                        $(".top-menu ul").slideToggle("slow", function () {
                        });
                    });
                    $(function () {
//            alert('${REQUEST.getRequestURL()}');
                        $('#menu li a').each(function () {
//                            alert('${REQUEST.getRequestURL()}');
//                            alert($(this).attr("href"));
                            if($(this).attr("href")=='${REQUEST.getRequestURL()}'){
                                $(this).parent().addClass('active');
                            }
                        });
                    });
                </script>

                <!-- script-for-menu -->

            </div>
        </div>
        <!-- //container -->
    </div>
    <#nested>
        <div class="copywrite">
            <div class="container">
                <p>Copyright © 2015 Energy All rights reserved | Design by <a href="http://w3layouts.com" target="_blank">W3layouts</a>
                </p>
            </div>
        </div>
        <!---->
        <!--<a href="#to-top" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>-->
        <!---->
    </body>
    </html>
</#macro>